import React,{Component,PureComponent} from 'react'

export default class index extends Component {

  state = {
    name:'JIMMY'
  }

  changeName = ()=>{
    this.setState({
      name:'XUEXUE'
    })
  }

  shouldComponentUpdate(nextProps,nextState){
    /*
      复习 这个生命周期是更新状态的阀门，  默认是返回true 就是都会更新状态
        接收两个参数 分别是 nextProps nextState

      最优的解应该是 判断前后的两者有没有区别之后 再执行render  默认是都会执行render 所以这个是一个可以优化的点
    */  

    // 只有当不同的时候 才会去触发阀门开启 开启render
    
    if(JSON.stringify(nextProps)!=JSON.stringify(this.props)||JSON.stringify(nextState)!=JSON.stringify(this.state)){
      return true
    }else{
      return false
    }

    /*
      我们发现 这样确实是优化了 但是还有一个小问题
        就是每个组件我们都需要去写一边吗？  这个其实是不方便的 
        所以 React为什么 提供 了 一个新的 类  就是  PureComponent 

        我们继承这个类所创建的组件 就拥有了自动是否改变在调用渲染的功能  -- 本质上就是重写了 shouldComponentUpdate 这个生命周期
    */ 
    
  }

  render() {
    console.log('父组件 -- render')
    return (
      <div>
        <h2>我是父组件</h2>
        <p>我的名字是：{this.state.name}</p>
        <button onClick={this.changeName}>改名</button>
        <C/>
      </div>
    )
  }
}



class C extends PureComponent{
  /*
    继承 PureComponent 这个类创建出来的组件会 自动判断 state  或者是  props是否发生了改变
      只有发生了改变才会触发重新渲染 的 render 函数
  */ 

  render(){
    console.log('子组件 -- render')
    return (
      <div>
        <h2>我是C组件</h2>
        <p>我接到的名字是：{this.props.name}</p>
      </div>
    )
  }
}